<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>async和await</title>
</head>

<body>

</body>
<script>
  /* 
  MDN：
  https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function
  https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/await
  
  1、async 函数
    函数的返回值为promise对象
    promise对象的结果由async函数执行的返回值决定

  2、await 表达式
    await右侧的表达式一般为promise对象，但也可以是其他的值
    如果是promise对象，await返回的是promise成功的值
    如果表达式是其他值，直接将此值作为await的返回值

  3、注意：
    await必须写在async函数中，但async函数中可以没有await
    如果await的promise失败了，就会抛出异常，需要通过try...catch来捕获处理
  */

  // async函数的返回值是一个promise对象
  // async函数返回的promise的结果由函数执行的结果决定
  async function fn1() {
    // return 1
    // throw 2
    // return Promise.reject(3);
    // return Promise.resolve(4);
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(5)
      }, 1000);
    })
  }
  const result = fn1()
  // console.log(result);
  result.then(
    value => {
      console.log('onResolved()', value);
    },
    reason => {
      console.log('onRejected()', reason);
    }
  )

  function fn2() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        // resolve(6)
        reject(6)
      }, 1000);
    })
  }

  function fn4() {
    return 7
  }

  async function fn3() {
    try {
      const value = await fn2(); // await右侧表达式为promise，得到的结果就是promise对象的处理结果
    } catch (error) {
      console.log('得到失败的结果', error);
    }

    // const value = await fn4() // await右侧表达式不是promise，得到的结果就是它本身
    // console.log('value', value);
  }
  fn3()



</script>

</html>